// 提供服用逻辑的函数(钩子)
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
// target dom对象  apiFn api函数
// 传入dom对象和api函数就可以获得数据
export const useLazyData = (apiFn) => {
  const result = ref([])
  // 优化 函数内声明获取dom的元素
  const target = ref(null)
  // 停止观察
  const { stop } = useIntersectionObserver(
    // 监听的dom元素
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting 是否进入可视区
      if (isIntersecting) {
        stop()
        // 调用api函数获取数据
        apiFn().then((data) => {
          result.value = data.result
        })
      }
    },
    {
      // 相交的比例 0为只要相交就加载数据
      threshold: 0
    }
  )
  // 返回ref声明的dom 在调用时直接使用
  return { target, result }
}
